<template>
  <div>
    <basic-container>
      <avue-crud
        ref="scopeTree"
        :data="tableData"
        :option="option"
        :destroy-on-close="true"
        @row-save="rowSave"
        @refresh-change="searchHandler"
        @row-del="btnDelete"
        @row-update="rowUpdate"
        @search-change="searchChange"
        @search-reset="searchReset"
      >
        <template slot-scope="{ disabled, size }" slot="classIdSearch">
          <el-select
            placeholder="请选择查看班级"
            :disabled="disabled"
            :size="size"
            style="width: 200px"
            v-model="searchForm.classId"
          >
            <el-option
              v-for="item in classDictionary"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
        <template slot-scope="{ disabled, size }" slot="termIdSearch">
          <el-select
            placeholder="请选择查看学期"
            :disabled="disabled"
            :size="size"
            style="width: 200px"
            v-model="searchForm.termId"
          >
            <el-option
              v-for="item in termDictionary"
              :key="item.id"
              :label="item.term"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
        <template slot-scope="scope" slot="menuLeft">
          <el-button @click="printBtn(scope.row)" size="small" type="primary"
            >打印</el-button
          >
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>
<script>
import { byNameNotPermissionAndAll,staticData,allTerm } from "@/api/teacherPage/staticData";
import printJS from "print-js";

export default {
  name: "",
  data() {
    return {
      classDictionary: [],
      termDictionary:[],
      headers: {
        Authorization: "",
      },
      // 打印数据
      list: [],
      searchForm: {
        classId: "",
        termId:"",
      },
      tableData: [],
      option: {
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        editBtn: false,
        delBtn: false,
        addBtn: false,
        viewBtn: true,
        menu: false,
        searchMenuSpan: 6,
        align: "center",
        column: [
          {
            label: "姓名",
            prop: "studentName",
          },
          {
            label: "学号",
            prop: "studentKey",
          },
          {
            label: "所属班级",
            prop: "classId",
            hide:true,
            searchslot: true,
            search: true,
          },
          {
            label: "学期",
            prop: "termId",
            searchslot: true,
            search: true,
          },
          {
            label: "总成绩",
            prop: "allGrades",
          },
          {
            label: "美誉成绩",
            prop: "beautyGrades",
          },
          {
            label: "互评成绩",
            prop: "evaluationGrades",
          },
          {
            label: "智育成绩",
            prop: "intellectualGrades",
          },
          {
            label: "智育排名",
            prop: "intellectualLevel",
          },
          {
            label: "是否有未及格科目",
            prop: "isHasNotPass",
            dicData: [
              {
                label: "是",
                value: true,
              },
              {
                label: "否",
                value: false,
              },
            ],
          },
          {
            label: "是否有处分",
            prop: "isPunishment",
            dicData: [
              {
                label: "是",
                value: true,
              },
              {
                label: "否",
                value: false,
              },
            ],
          },
          {
            label: "是否有资格评定奖学金",
            prop: "isQualification",
            dicData: [
              {
                label: "是",
                value: true,
              },
              {
                label: "否",
                value: false,
              },
            ],
          },
          {
            label: "劳育成绩",
            prop: "laborGrades",
          },
          {
            label: "德育成绩",
            prop: "moralGrades",
          },
          {
            label: "体育成绩",
            prop: "peGrades",
          },
          {
            label: "扣分",
            prop: "punishGrades",
          },
          {
            label: "奖学金",
            prop: "reward",
          },
        ],
      },
    };
  },
  created() {
    byNameNotPermissionAndAll().then((res) => {
      this.classDictionary = res.data;
      this.searchForm.classId = this.classDictionary[0].id;
      this.searchHandler();
    });
    allTerm().then((res) =>{
      this.termDictionary = res.data
      this.searchForm.termId = this.termDictionary[this.termDictionary.length - 1].id;
      this.searchHandler();
    })
  },
  methods: {
    searchReset(){
      this.searchForm.classId = '';
      this.searchForm.termId = '';
    },
    printBtn() {
      let data = [];
      for (let i = 0; i < this.tableData.length; i++) {
        data.push({
          field1: this.tableData[i].studentName,
          field2: this.tableData[i].studentKey,
          field3: this.tableData[i].reward,
          field4: this.tableData[i].allGrades,
        });
      }
      printJS({
        printable: data,
        properties: [
          {
            field: "field1",
            displayName: "姓名",
            columnSize: 1,
          },
          {
            field: "field2",
            displayName: "学号",
            columnSize: 1,
          },
          {
            field: "field3",
            displayName: "奖学金",
            columnSize: 1,
          },
          {
            field: "field4",
            displayName: "总成绩",
            columnSize: 1,
          },
        ],
        type: "json",
        header: "标题",
        // 样式设置
        gridStyle: "border: 2px solid #000;",
        gridHeaderStyle: "color: black;  border: 2px solid #000;",
      });
    },
    searchHandler() {
      staticData(this.searchForm).then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    searchChange(params, done) {
      this.searchHandler();
      done();
    },
  },
};
</script>

<style></style>
